<template>
	<!-- 订单跟踪 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="订单跟踪" :bottomline="true"></headTitle>
		<view class="des bgfff flex-center">
			<image src="http://www.xyfdcw.com.cn/userfiles/image/20200225/250949238ea3e3a7ec8112.jpg" mode="aspectFill"></image>
			<view class="info flex-column-between">
				<view class="font30">
					<text class="color666">配送企业：</text><text class="color333 fontb">顺丰快递</text>
				</view>
				<view class="font30">
					<text class="color666">快递单号：</text><text class="color333 fontb">2765302256</text>
				</view>
				<view class="font30">
					<text class="color666">联系电话：</text><text class="color333 fontb">95338</text>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="flow" v-for="(item, index) in data" :key="index">
				<view class="left flex-center-center">
					<view class="line" :class="{'first-line': index === 0 && data.length > 1, 'second-line': index === 1 && data.length > 2}" v-if="index+1 !== data.length"></view>
					<image class="circle" src="/static/image/wulid.png" mode="" v-if="index === 0 && true"></image>
					<image class="circle" src="/static/image/wulit.png" mode="" v-if="index === 0 && false"></image>
					<view class="circle gary" v-if="index === 1"></view>
					<view class="circle last" v-if="index > 1"></view>
				</view>
				<view class="right">
					<view class="name font30" :class="{'color333': index === 0, 'color666': index === 1, 'color999': index > 1}">{{ item.name }}</view>
					<view class="time font28" :class="{'color666': index === 0, 'color999': index === 1, 'color-bbb': index > 1}">{{ item.time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
export default {
	data() {
		return {
			data : [
				{
					name: '到达目的地网点广东深圳公司，快件将很快进行派送',
					time: '今天 16:40',
				},
				{
					name: '在分拨中心广东深圳公司进行卸车扫描',
					time: '昨天 10:40',
				},
				{
					name: '在北京市进行下级地点扫描',
					time: '2020-12-30 12:40',
				},
				{
					name: '商品已发货',
					time: '2020-12-29 09:40',
				},
				{
					name: '订单付款成功',
					time: '2020-12-28 12:40',
				},
				{
					name: '订单已提交，等待付款',
					time: '2020-12-28 09:40',
				}
			]
		}
	},
	components: {
		headTitle
	}
}
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}
.des {
	width: 100%;
	height: 220rpx;
	padding: 30rpx;
	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
	}
	.info {
		height: 160rpx;
		padding: 10rpx 0;
	}
}
.box {
	padding: 30rpx;
	.flow {
		display: flex;
		.left {
			position: relative;
			width: 40rpx;
			margin-right: 20rpx;
			.line {
				transform: translateY(10rpx);
				width: 2rpx;
				height: 100%;
				background-color: #E1E1E1;
			}
			.first-line {
				background:linear-gradient(130deg, #B9B9B9, #CBCBCB)
			}
			.second-line {
				background:linear-gradient(130deg, #CBCBCB, #E1E1E1)
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
			.circle {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				&.gary,
				&.last {
					top: 10rpx;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
				}
				&.gary {
					background-color: #B2B2B2;
					border: 2rpx solid #D1D1D1;
				}
				&.last {
					background-color: #CDCDCD;
					border: 2rpx solid #E1E1E1;
				}
			}
		}
		.right {
			width: 630rpx;
			.name {
				margin-bottom: 20rpx;
				line-height: 40rpx;
			}
			.time {
				margin-bottom: 60rpx;
			}
			.color-bbb {
				color: #BBB;
			}
		}
	}
	
}
</style>
